<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title th:text="'你好'">Insert title here</title>

<link href="css/modern.css" rel="stylesheet"/>
<link href="css/modern-responsive.css" rel="stylesheet"/>
<link href="css/jquery.qtip.min.css" rel="stylesheet"/>
<link href="css/base.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript" src="js/input-control.js"></script>
<script type="text/javascript" src="js/tile-slider.js"></script>
<script type="text/javascript" src="js/jquery.qtip.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var
null_account_type = /*[[#{null_account_type}]]*/'aaa'
, null_account_no = /*[[#{null_account_no}]]*/'aaa'
, add_success = /*[[#{add_success}]]*/'aaa'
, remove_success = 'bbb'
, unexcepted_error_tip = /*[[#{unexcepted_error_tip}]]*/'aaa'
, commission_last_pay = /*[[#{commission_last_pay}]]*/'commission_last_pay'
, commission_total = /*[[#{commission_total}]]*/'commission_total'
, imgUrl = /*[[@{/images/}]]*/'img';
$(function(){
	$('#broker').change(function(){
		var brokerId = $(this).val();
		$('#account-no').val('').prop('disabled', true);
		$('#account-self-desc').val('').prop('disabled', true);
		if(!brokerId || brokerId == ''){
			$('#account-type').html('').prop('disabled', true);
			return;
		} else {
			$('#loading').show();
			$.ajax({
				url: /*[[@{/broker/accountTypeByBrokerId}]]*/'./broker/accountTypeByBrokerId'
				, type: 'GET'
				, data: {
					brokerId: brokerId
				}
				, dataType: 'json'
				, error: function(jqXHR, textStatus, errorThrown){
					alert(unexcepted_error_tip);
					$('#loading').hide();
				}
				, success: function(data, textStatus, jqXHR){
					if(data && data.length > 0){
						var $at = $('#account-type').prop('disabled', false);
						$at.html('');
						$('<option></option>').appendTo($at);
						for ( var i = 0; i < data.length; i++) {
							var at = data[i];
							$('<option value="'+at.idStr+'">'+at.type+'</option>').appendTo($at);
						}
					}
					$('#loading').hide();
				}
			});
		}
	});
	
	$('#account-type').change(function(){
		$('#account-no').val('');
		$('#account-self-desc').val('');
		var atId = $('#account-type').val();
		if (!atId || atId == '') {
			$('#account-no').prop('disabled', true);
			$('#account-self-desc').prop('disabled', true);
		} else {
			$('#account-no').prop('disabled', false);
			$('#account-self-desc').prop('disabled', false);
		}
	});
	
	$('#btn-addAccount').click(function(){
		var accountTypeId = $('#account-type').val();
		if (!accountTypeId || accountTypeId == '') {
			$('#account-type').parent().addClass('border-color-red');
			alert(null_account_type);
			return;
		}
		var accountNo = $('#account-no').val();
		if (!accountNo || accountNo == '') {
			$('#account-no').parent().addClass('border-color-red');
			alert(null_account_no);
			return;
		}
		var accountSelfDesc = $('#account-self-desc').val();
		$('#loading').show();
		$.ajax({
			url: /*[[@{/account/addNewAccount}]]*/'./account/addNewAccount'
			, type: 'POST'
			, data: {
				accountNo: accountNo
				, selfDesc: accountSelfDesc
				, accountTypeId: accountTypeId
			}
			, dataType: 'json'
			, error: function(jqXHR, textStatus, errorThrown){
				alert(unexcepted_error_tip);
				$('#loading').hide();
			}
			, success: function(data, textStatus, jqXHR){
				$('#loading').hide();
				if(data && data.result == 1){
					alert(add_success);
					
					var li = $('<li></li>').appendTo($('#account-list-ul'));
					$('<div class="icon"><img src="'+imgUrl+'"></div>').appendTo(li);
					$('<div class="data"><input type="hidden" class="accountId" value="'+data.accountId+'" /><input type="hidden" class="accountNo" value="'+accountNo+'"/><h4>'+(accountSelfDesc==''?accountNo:accountSelfDesc)+'</h4><p>' + $("#broker").find("option:selected").text() + ': '+ accountNo + ', ' + $("#account-type").find("option:selected").text() +'</p><p>' + commission_last_pay + ': 0.0</p><p>' + commission_total + ': 0.0</p><p>New</p></div>').appendTo(li);

					$('#broker').val('');
					$('#account-type, #account-no, #account-self-desc').val('').prop('disabled', true);
					
					$('#add-account-div').slideUp();
					return;
				}
				alert(unexcepted_error_tip);
			}
		});
	});
	
	$('#btn-modifyAccount').click(function(){
		var newName = $('#modify-account-self-desc').val();
		var ordinaryName = $('#modify-ordinaryName').val();
		if(newName != ordinaryName){
			var no = $('#modify-accountNo').val(), id = $('#modify-accountId').val();
			if(!no || no == '' || !id || id== ''){
				alert('未获取到需要的信息，请刷新页面');
				return;
			}
			if(confirm('修改为' + no + ': ' + newName + '?')){
				$('#loading').show();
				$.ajax({
					url: /*[[@{/account/modifyAccountName}]]*/'./account/modifyAccountName'
					, type: 'POST'
					, data: {
						id: id
						, selfDesc: newName
					}
					, dataType: 'json'
					, error: function(jqXHR, textStatus, errorThrown){
						alert(unexcepted_error_tip);
						$('#loading').hide();
					}
					, success: function(data, textStatus, jqXHR){
						$('#loading').hide();
						if(data && data.result == 1){
							alert(add_success);
							$('#modify-account-self-desc').val('');
							$('#modify-ordinaryName').val('');
							$('#modify-accountNo').val('');
							$('#modify-accountId').val('');
							
							var x = $('.accountId'), y;
							for ( var i = 0; i < x.length; i++) {
								y = x[i];
								if($(y).val() == id){
									break;
								}
							}
							$(y).parent().find('h4').html(newName == ''? no : newName);
							
							$('#modify-account-div').slideUp();
							return;
						}
						alert(unexcepted_error_tip);
					}
				});
			}
		}
	})
	
	$('#account-no').bind('blur', function(){
		if($('#account-self-desc').val() == ''){
			$('#account-self-desc').val($(this).val());
		}
	});
	
	$('#account-list-ul li').live('click', function(){
		if($(this).data('selected')){
			$(this).data('selected', false).removeClass('selected');
		} else {
			$(this).data('selected', true).addClass('selected');
		}
		$('#modify-account-div').slideUp();
	});
	
	$('#add-account').click(function(){
		$('#add-account-div').slideDown();
	});
	$('.hide-div').click(function(){
		$(this).parent().parent().slideUp();
	});
	$('#modify').click(function(){
		var a = $('#account-list-ul li.selected');
		if(a.length == 0){
			alert('请选择一个账户进行修改');
			return;
		}
		if(a.length > 1){
			alert('only one account can be selected when modify');
			return;
		}
		$('#modify-accountNo').val(a.find('.accountNo').val());
		$('#modify-accountId').val(a.find('.accountId').val());
		$('#modify-ordinaryName').val(a.find('h4').text());
		$('#modify-account-self-desc').val(a.find('h4').text());
		$('#modify-account-div').slideDown();
	});
	$('#delete').click(function(){
		var a = $('#account-list-ul li.selected');
		if(a.length == 0){
			alert('请至少选择一个账户进行删除');
			return;
		}
		accountNoArray = $(a[0]).find('.accountNo').val();
		accountIdArray = $(a[0]).find('.accountId').val();
		for ( var i = 1; i < a.length; i++) {
			accountNoArray = accountNoArray + ',' + $(a[i]).find('.accountNo').val();
			accountIdArray = accountIdArray + ',' + $(a[i]).find('.accountId').val();
		}
		if(confirm('是否要删除以下帐号:\n' + accountNoArray)){
			$('#loading').show();
			$.ajax({
				url: /*[[@{/account/removeAccounts}]]*/'./account/removeAccounts'
					, type: 'POST'
					, data: {
						accountIdsStr: accountIdArray
					}
					, dataType: 'json'
					, error: function(jqXHR, textStatus, errorThrown){
						alert(unexcepted_error_tip);
						$('#loading').hide();
					}
					, success: function(data, textStatus, jqXHR){
						$('#loading').hide();
						if(data && data.result == 1){
							var a = $('#account-list-ul li.selected');
							for ( var i = 0; i < a.length; i++) {
								var a = a[i];
								$(a).remove();
							}
							
							alert(remove_success);
							
							return;
						}
						alert(unexcepted_error_tip);
					}
			});
		}
	});
	
	
	
	
	$('a[title]').qtip();
});
/*]]>*/
</script>
</head>
<body>
<header th:substituteby="common/template::header">
</header>
<div class="clearfix"></div>
<div id="loading" class="pos-abs no-display">
	<img th:src="@{/images/preloader-w8-cycle-black.gif}"/>
</div>
<div class="span12 align-center">
	<div class="grid">
		<div class="row">
			<h2 class="span3">我的帐号信息</h2>
			<h3 id="my-account-operation" class="span2 place-right">
				<a id="add-account" th:title="#{add_account_tip}"><i class="icon-plus-2"></i></a>
				<a title="modify"><i id="modify" class="icon-wrench"></i></a>
            	<a title="delete"><i id="delete" class="icon-cancel"></i></a>
			</h3>
		</div>
	</div>
	<div id="add-account-div" class="grid no-display">
		<div class="row">
			<label for="broker" class="span1 text-right">做市商</label>
			<div id="broker-selector" class="input-control select span2">
		        <select id="broker">
		            <option></option>
		            <option th:each="broker:${brokerList}" th:value="${broker.idStr}" th:text="${broker.name}"></option>
		        </select>
		    </div>
			<label for="account-type" class="span1 text-right offset1">帐号类型</label>
			<div id="account-type-selector" class="input-control select span2">
		        <select id="account-type" disabled="disabled">
		            <option></option>
		        </select>
		    </div>
			<label for="account-no" class="span1 text-right offset1">帐号</label>
		    <div id="account-no-text" class="input-control text span2" >
		        <input type="text" id="account-no" disabled="disabled"/>
		        <button class="helper"></button>
		    </div>
		</div>
		<div class="row" style="position: relative;">
			<label for="account-no" class="span1 text-right">自定名称</label>
		    <div id="account-self-desc-text" class="input-control text span2">
		        <input type="text" id="account-self-desc" disabled="disabled"/>
		        <button class="helper"></button>
		    </div>
		    <button id="btn-addAccount" class="default offset1">确定</button>
		    <a class="hide-div" title="shouhui"><i class="icon-arrow-up"></i></a>
		</div>
	</div>
	<div id="modify-account-div" class="grid no-display">
		<input type="hidden" id="modify-accountNo"/>
		<input type="hidden" id="modify-accountId"/>
		<input type="hidden" id="modify-ordinaryName" />
		<div class="row" style="position: relative;">
			<label for="account-no" class="span1 text-right">自定名称</label>
		    <div id="modify-account-self-desc-text" class="input-control text span2">
		        <input type="text" id="modify-account-self-desc" />
		        <button class="helper"></button>
		    </div>
		    <button id="btn-modifyAccount" class="default offset1">确定</button>
		    <a class="hide-div" title="shouhui"><i class="icon-arrow-up"></i></a>
		</div>
	</div>
	<ul id="account-list-ul" class="listview fluid">
		<li th:if="${accountList}" th:each="account : ${accountList}">
			<div class="icon">
                <img src="" th:src="@{/images/}"/>
            </div>
            <div class="data">
            	<input type="hidden" class="accountId" value="" th:value="${#strings.toString(account.id)}"/>
            	<input type="hidden" class="accountNo" value="" th:value="${account.accountNo}"/>
                <h4 th:text="${#strings.isEmpty(account.selfDesc)}?${account.accountNo}:${account.selfDesc}"></h4>
                <p th:text="${account.accountType.broker.name} + ': ' + ${account.accountNo} + ', ' + ${account.accountType.type}"></p>
                <p th:text="#{commission_last_pay} + ': ' + ${account.lastPay}"></p>
                <p th:text="#{commission_total} + ': ' + ${account.totalCommission}"></p>
                <p th:text="${#strings.isEmpty(account.active)}?#{account_active_ing}:(${account.active}?#{account_is_active}:#{account_not_active})"></p>
            </div>
		</li>
	</ul>
</div>
<div th:substituteby="common/template::page-settings"></div>
</body>
</html>